<template>
  <el-dialog :visible.sync="dialogVisible" width="1000px" :before-close="close"
             :close-on-click-modal="false" :close-on-press-escape='false'
             :title="form.id?'编辑邮箱信息':'绑定新邮箱'" center>
    <div class="email-bind">
      <div class="left">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="130px" @keyup.enter.native="submit">
          <el-form-item label="邮箱账号:" prop="emailAddr">
            <el-input v-model="form.emailAddr" size="small" placeholder="请输入邮箱账号" :readonly="form.id!=''"></el-input>
          </el-form-item>
          <el-form-item label="邮箱密码/授权码:" prop="passWord" class="password">
            <el-input v-model="form.passWord" :type="!state?'password':'text'" size="small"
                      placeholder="使用邮箱密码或授权码绑定"></el-input>
            <i :class="state?'el-icon-view':'icon-yanjing'"
               :style="{top:state?'28%':'5%'}"
               @click="state=!state"></i>
          </el-form-item>
          <el-form-item v-if="!form.id" class="extra" label="协议类型:" prop="protocolType" >
            <el-select v-model="form.protocolType" size="small">
              <el-option label="IMAP" value="0"></el-option>
              <el-option label="POP3" value="1"></el-option>
            </el-select>
            <h6 class="email-http">(不推荐使用POP3协议，POP3协议只能同步收件箱)</h6>
          </el-form-item>
          <el-form-item class="extra" label="协议类型:" v-else>
            <p>{{filter(form.protocolType)}}</p>
          </el-form-item>
          <div v-show="!form.isShow">
            <el-form-item class="extra" label="发邮件服务器:" prop="Server">
              <el-input v-model="form.Server" size="small" placeholder="请输入发送服务器（smtp）" style="width: 230px;"></el-input>&nbsp;:
              <el-input v-model="form.ServerPort"  type="number" size="small" placeholder="端口号" style="width: 86px;"></el-input>
              <el-checkbox v-model="form.smtpSslElse">SSL</el-checkbox>
            </el-form-item>
            <el-form-item class="extra" label="接邮件服务器:" prop="Imap4Server">
              <el-input v-model="form.Imap4Server" size="small"  :placeholder="`请输入接收服务器（${form.protocolType==0?'IMAP':'POP3'}）`"
                        style="width: 230px;"></el-input>&nbsp;:
              <el-input v-model="form.Imap4Port"  type="number" size="small" placeholder="端口号" style="width: 86px;"></el-input>
              <el-checkbox v-model="form.imapSslElse">SSL</el-checkbox>
            </el-form-item>
          </div>
          <el-form-item :label="form.isShow?'手动配置':'收起手动配置'" class="hand" @click.native="form.isShow=!form.isShow">
            <div v-show="errorMsg!=''" class="error" @click.stop="form.isShow=form.isShow">
              {{errorMsg}}
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="left" style="margin-left: 125px;margin-top: 25px;">
          <el-button @click="close" size="mini">取 消</el-button>
          <el-button type="primary" size="mini" @click="submit" :loading="showLoading">{{showLoading?'绑定中':'确 定'}}</el-button>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <p>检测到您的邮箱为 <span>{{emailName}}</span></p>
          <p>您可以按照以下步骤完成绑定，已有98%的用户成功绑定</p>
        </div>
        <viewer>
          <h2>验证步骤: {{emailName}}</h2>
          <ul>
            <li v-for="item,index in help.list" :key="index" :class="item.type==1?'bottom':''">
              <h1 v-if="item.type!=2"><span v-show="item.type==0">{{index+1}}、</span><b style="font-weight: normal;" v-html="item.text"></b>
              </h1>
              <h1 v-else><span v-show="item.type==0">{{index+1}}、</span><b style="font-weight: normal;font-size: 14px;" v-html="item.text"></b>
              </h1>
              <img v-if="item.url!=''" :src="item.url" alt="">
            </li>
          </ul>
          <hr>
          <p style="font-size: 14px;line-height: 25px;margin-bottom: 10px!important;">
            在绑定邮件的过程中如果遇到问题，可以加客服的QQ或者微信 <br>
            <span style="color: red">客服QQ号：2314085452 &nbsp;&nbsp;&nbsp;&nbsp; 客服微信号：15268169077</span>
          </p>
        </viewer>
      </div>
    </div>
    <!-- 底部按钮-->

  </el-dialog>
</template>

<script>
    import {update, add} from "@/api/mail/admin/mail-set"
    import {validateEmail} from '@/util/util'
    import emailJson from '../../../../public/cdn/json/email'

    export default {
        name: "DialogEmailHelp",
        data() {
            var checkEmail = (rule, value, callback) => {
                if (!validateEmail(value)) {
                    return callback(new Error('请输入正确格式的邮箱'));
                } else {
                    callback();
                }
            };
            return {
                dialogVisible: false,
                help: {},
                form: {
                    id: '',
                    emailAddr: '',
                    passWord: '',
                    Imap4Server: '',//接收服务器
                    Server: '',//发送服务器
                    ServerPort: '',
                    Imap4Port: '',
                    isShow: true,
                    smtpSsl: 0,
                    imapSsl: 0,
                    protocolType: '0',
                    smtpSslElse: true,
                    imapSslElse: false
                },
                rules: {
                    emailAddr: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {validator: checkEmail, trigger: 'blur'}
                    ],
                    passWord: [
                        {required: true, message: 'IMAP协议使用邮箱密码授权码绑定', trigger: 'blur'},
                    ],
                },
                errorMsg: '',
                state: false,
                emailName: '',
                showLoading:false
            }
        },
        methods: {
            close(){
                this.dialogVisible = false;
                this.showLoading=false;
            },
            filter(type){
                switch (parseInt(type)) {
                    case 0:
                        return 'IMAP';
                        break;
                    case 1:
                        return 'POP3';
                        break;
                    case 2:
                        return 'Exchange';
                        break;
                    default:
                        return 'IMAP'
                }
            },
            guide() {
                this.showLoading=false;
                //判断邮箱类型 163 ,126,163企业，qq
                if (this.form.emailAddr.indexOf('@qq') != -1) {
                    this.help = emailJson[2]
                } else if (this.form.emailAddr.indexOf('@163') != -1) {
                    this.help = emailJson[1]
                } else if (this.form.emailAddr.indexOf('@126') != -1) {
                    this.help = emailJson[0]
                } else {
                    this.help = emailJson[3]
                }
                this.emailName = this.help.title;
            },
            init(form, error, row) {
                this.errorMsg = error;
                this.help = row;
                this.emailName = row.title;
                this.form = Object.assign({}, this.form, form);
                this.dialogVisible = true;
            },
            //绑定邮箱
            submit() {
                this.showLoading=true;
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.form.smtpSsl = this.form.smtpSslElse ? 1 : 0;
                        this.form.imapSsl = this.form.imapSslElse ? 1 : 0;
                        let target = JSON.parse(JSON.stringify(this.form));
                        delete target.smtpSslElse;
                        delete target.imapSslElse;
                        if (this.form.id) { //编辑更新
                            update(target, 1).then(res => {
                                this.dealEnd(res, 1)
                            }).catch(err => {
                                this.errorMsg = err['msg'];
                                this.guide();
                            });
                        } else { //新增
                            add(target, 1).then(res => {
                                this.dealEnd(res, 1)
                            }).catch(err => {
                                this.errorMsg = err['msg'];
                                this.guide();
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            dealEnd(res, type) {
                this.showLoading=false;
                if (res.data.success) {
                    this.dialogVisible = false;
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                    this.form.id = '';
                    if (this.$refs.ruleForm) {
                        this.$refs.ruleForm.resetFields();
                    }
                    this.errorMsg = ''
                    this.$emit('getData', type);
                } else {
                    this.errorMsg = res.data.msg
                }
            },
            //重置
            resetForm() {
                this.form = {
                    id: '',
                    emailAddr: '',
                    passWord: '',
                    Imap4Server: '',//接收服务器
                    Server: '',//发送服务器
                    ServerPort: '',
                    Imap4Port: '',
                    smtpSsl: 0,
                    imapSsl: 0,
                    smtpSslElse: true,
                    imapSslElse: false,
                    protocolType: '0',
                    isShow: true
                }
                this.errorMsg = ''
            }
        }
    }
</script>

<style scoped lang="scss">
  .email-bind {
    display: flex;

    .left {
      width: 600px;
      padding-right: 13px;
    }
    .email-http{
      font-size: 12px;
      line-height: 20px;
    }
    .error {
      b {
        cursor: pointer;
      }
    }

    .right {
      width: 600px;
      padding: 0 11px;
      max-height: 600px;
      overflow-y: scroll;
      border-left: 1px solid #ddd;

      .top {
        margin-bottom: 10px;

        p {
          text-align: center;
          line-height: 22px;
          color: #333;

          span {
            color: red;
          }
        }
      }

      h2 {
        font-size: 18px;
        color: #000;
        margin-bottom: 10px;
      }

      li {
        margin-bottom: 20px;

        h1 {
          font-size: 16px;
          color: #232323;
          margin-bottom: 20px;
        }

        img {
          display: block;
          width: 100%;
        }
      }

      li.bottom {
        border-top: 1px solid #66666642;
        margin-top: 22px;
        padding-top: 15px;
        h1{
          font-size: 15px;
          line-height: 23px;
        }
      }
    }
  }
</style>
